import  React, { useEffect, useState } from 'react'
import { View, Text } from '@tarojs/components'
import { AtNoticebar } from 'taro-ui';
import ImgLaoHu from "@/assets/laohu.jpeg";
import './index.scss'

// 样式数据类型
type STYLE_CHILD = {
  pagePadding: VALUE,
  cmpUpperPadding: VALUE,
  cmpLowerPadding: VALUE,
  cmpRadius: VALUE,
  cmpBackground?: VALUE,
}
type STYLE = {
  label: string,
  type: string,
  child: STYLE_CHILD
}
// 值的数据类型
type VALUE = {
  label: string,
  type: string,
  value: string | number
}

type IMG_CHILD = {
  imgPath?:  VALUE,
  jumpPath?:  VALUE
}

type IMG_VALUE = {
  child: IMG_CHILD,
  label: string,
  type: string
}

interface Props {
  styles: STYLE;
  // value: IMG_VALUE;
};

// 做一个数据个映射
const styleTable = {
  pagePadding: "padding",
  fontColor: "color",
  fontSize: "fontSize",
  cmpBackground: "backgroundColor",
  speed: "speed"
}

const HeNoticebar = (props: any) => {
  const { styles, value} = props;
  const [comStyle, setComStyle] = useState({});
  const [textStyle, setTextStyle] = useState({});

  const handleStyle = (child, model) => {
    let objCom = {};
    let objTextCom = {};

    for (let key in child) {
      const element = child[key];
      if( styleTable[key] == 'backgroundColor' || styleTable[key] == 'color' ) {
        objCom[styleTable[key]] = element.value;
      } else if(styleTable[key] == 'fontSize') {
        objTextCom[styleTable[key]] = element.value + 'px';
      }
      else {
        objCom[styleTable[key]] = element.value + 'px';
      }
    }
    return {objCom, objTextCom};
  }
  useEffect(() => {
    let {objCom, objTextCom} = handleStyle(styles?.child, {});
    console.log("-----textStyle---");
    console.log(textStyle);
    setComStyle(objCom);
    setTextStyle(objTextCom);
  }, [styles]);



  return (
    // <View  style={comStyle}  className='he-noticeba'>
    <View  className='he-noticebar'>
      <AtNoticebar icon='volume-plus' customStyle={comStyle} single marquee speed={styles?.child?.speed?.value}>
        {value?.child?.text?.value}
      </AtNoticebar>
    </View>
  )
}

export default HeNoticebar;